<template>
  <div class="system">
    <el-row class="top">
      <el-col :span="4">
        <h2 class="title">用户管理</h2>
      </el-col>
      <el-col :span="2" :offset="14">
        <el-button type="success">新增用户</el-button>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal"></el-input>
      </el-col>
    </el-row>
    <el-table :data="users" stripe max-height="700">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="账号" prop="roleId"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号码" prop="mobile"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <!-- <el-table-column label="授权角色" prop="name"></el-table-column> -->
      <el-table-column label="状态" prop="enable">
        <template slot-scope="scope">
          <div>{{scope.row.enable == 1 ? '启用' : '禁用'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="primary">授权</el-button>
            <el-button size="mini" type="success">编辑</el-button>
            <el-button size="mini" type="warning">重置密码</el-button>
            <el-button size="mini" type="danger">禁用</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :current-page="current" :page-size="size" :total="total" :hide-on-single-page="true"
            @current-change="pageChange">
        </el-pagination>
  </div>
</template>
<script>
  import httpSer from "../../http";
  export default {
    data() {
      return {
        users: [],
        size: 10,
        total: 0,
        current: 1,
        searchVal: '',
        timer: null
      };
    },
    created() {
      this.getUsersInfo()
    },
    mounted() { },
    methods: {
      getUsersInfo() {
        httpSer.post('/userInfo/pageUserInfo', { size: this.size, current: this.current }).then(res => {
          this.users = res.records;
          this.total = res.total * 1;
          this.current = res.current * 1;
        })
      },
      pageChange(current){
        this.current = current * 1
        this.getUsersInfo()
      }
    },
    filters: {},
    watch: {
      searchVal(newVal, oldVal){
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          //搜索调用

      }, 300);
      }
    },
    components: {}
  };
</script>

<style lang="less" scope>
  @import "./index.less";
</style>